<template>
  <div class="admin-maintainer">
    <div class="maintainer-search">
      <el-input placeholder="请输入订单ID..." v-model="searchInput">
        <template slot="append">
          <el-button>搜索</el-button>
        </template>
      </el-input>
    </div>
    <div class="maintainer-table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column width="80" prop="index" label="序号">
        </el-table-column>
        <el-table-column width="120" prop="id" label="订单ID">
        </el-table-column>
        <el-table-column width="100" prop="linkman" label="用户">
        </el-table-column>
        <el-table-column prop="maintainer_nickname" label="维修员">
        </el-table-column>
        <el-table-column width="160" prop="create_time" label="订单发布时间">
        </el-table-column>
        <el-table-column width="160" class="time" prop="take_time" label="订单接单时间">
        </el-table-column>
        <el-table-column width="160" class="time" prop="done_time" label="订单完成时间">
        </el-table-column>
        <el-table-column prop="order_status" label="订单状态">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.$index,scope.row.id)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row.id)">操作</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <el-dialog title="订单详细" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <!-- ------订单详细------ -->
        <div class="dialog_info">
          <div class="info_item">
            <span><i>订单编号：</i>{{ itemData.id }}</span>
            <span><i>维修项目：</i>{{ itemData.service_name }}</span>
            <span><i>订单状态：</i>{{ itemData.order_status }}</span>
          </div>
          <div class="info_item">
            <span>
              <i>预约发布时间：</i>{{ itemData.create_time }}
            </span>
          </div>
          <div class="info_item">
            <span>
              <i>接单时间：</i>{{ itemData.take_time || '尚未接单' }}
            </span>
          </div>
          <div class="info_item">
            <span>
              <i>完成时间：</i>{{ itemData.done_time || '尚未完成' }}
            </span>
          </div>
          <div class="info_item">
            <span><i>客户姓名：</i>{{ itemData.linkman }}</span>
            <span><i>客户联系方式：</i>{{ itemData.phone }}</span>
          </div>
          <div class="info_item">
            <span><i>维修人员：</i>{{ itemData.maintainer_nickname }}</span>
            <span><i>维修人员联系方式：</i>{{ itemData.maintainer_phone }}</span>
          </div>
          <div class="info_item">
            <span>
              <i>预约时间：</i>
              {{ itemData.appointmentDate + ' ' + itemData.startTime + '-' + itemData.endTime }}
            </span>
            <span>
              <i>服务地址：</i>
              {{ itemData.districts + ' ' + itemData.city + ' ' + itemData.county }}
            </span>
          </div>
          <div class="info_item"><span><i>故障描述：</i>{{ itemData.failure }}</span></div>
          <div class="info_item"><span><i>备注：</i>{{ itemData.remark }}</span></div>
          <div class="info_item ">
            <span>维修费用：</span>
            <p><i>基础维修费用：</i><span class="pice">￥{{ itemData.service_pice }}</span></p>
            <p>
              <i>维修材料：</i><span class="pice">{{ itemData.material_maintain || '无' }}</span>
              <i>维修材料费用：</i><span class="pice">￥{{ itemData.material_pice || 0 }}</span>
            </p>
            <span>订单总价：
              <span class="pice">
                ￥{{ itemData.service_pice + (Number(itemData.material_pice) || 0) }}
              </span>
            </span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer" v-if="isEdit">
          <el-button type="primary" size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" size="mini" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAllOrderInfoService } from '@/api/admin'
export default {
  data () {
    return {
      searchInput: '',
      tableData: [],
      itemData: {},
      dialogVisible: false,
      isEdit: false
    }
  },
  created () {
    this.getAllOrderInfo()
  },
  methods: {
    async getAllOrderInfo () {
      const res = await getAllOrderInfoService()
      res.data.forEach((item, index) => {
        item.index = index + 1
        const data = new Date(item.create_time).toJSON()
        item.create_time = new Date(+new Date(data) + 8 * 3600 * 1000)
          .toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        let data1 = ''
        let data2 = ''
        if (item.take_time) {
          data1 = new Date(item.take_time).toJSON()
          item.take_time = new Date(+new Date(data1) + 8 * 3600 * 1000)
            .toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        }
        if (item.done_time) {
          data2 = new Date(item.done_time).toJSON()
          item.done_time = new Date(+new Date(data2) + 8 * 3600 * 1000)
            .toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        }
      })
      this.tableData = res.data
    },
    handleClick (index, id) {
      this.itemData = this.tableData[index]
      this.dialogVisible = true
    },
    handleEdit (index, id) {
      this.itemData = this.tableData[index]
      this.dialogVisible = true
      this.isEdit = true
    },
    handleClose (done) {
      done()
    }
  }
}
</script>

<style lang="less" scoped>
.admin-maintainer {
    width: 100%;
    height: 100%;
    background: #fff;

    .maintainer-search {
        padding: 20px 20px 0px 20px;
        width: 50%;
    }

    .maintainer-table {
        margin-top: 20px;
        padding: 20px;
        width: 100%;
    }
        .dialog {
          .dialog_info {
            span {
              display: inline-block;
              margin: 10px 20px;
              font-size: 14px;
              font-weight: bold;

              i {
                font-weight: normal;
              }
            }

            p {
              display: block;
              padding-left: 40px;
            }

            .pice {
              color: #E23A2E;
              font-size: 18px;
            }
          }
        }
}
</style>
